<template>
  <WsmTable
    ref="table"
    load-url="/dbms-server/base/formdesign/page"
    :change-load="true"
    :offset-height="80"
    v-model="queryFormType"
  >
    <template #title>{{ t('dbms.design.formDesign.tableTitle') }}</template>
    <template #button="{ row }">
      <el-button type="primary" @click="addForm.show()">{{ t('common.add') }}</el-button>
      <template v-if="row">
        <el-button @click="update(row.id)" type="primary">{{ t('common.update') }}</el-button>
        <el-button @click="del(row.id)" type="danger">{{ t('common.delete') }}</el-button>
        <el-button @click="design(row.id)" type="warning">{{
          t('dbms.design.formDesign.designBtn')
        }}</el-button>
        <template v-if="row.activity == 1">
          <el-button @click="activity(row.id)" type="danger">{{
            t('dbms.design.formDesign.disable')
          }}</el-button>
        </template>
        <template v-else>
          <el-button @click="activity(row.id)" type="success">{{
            t('dbms.design.formDesign.enable')
          }}</el-button>
        </template>
      </template>
    </template>
    <template #column>
      <el-table-column prop="activity" :label="t('dbms.design.formDesign.activity')" width="100">
        <template #default="scope">
          <template v-if="scope.row.activity == 1">
            <el-tag type="success">{{ t('dbms.design.formDesign.enable') }}</el-tag>
          </template>
          <template v-else>
            <el-tag type="danger">{{ t('dbms.design.formDesign.disable') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="code" :label="t('dbms.design.formDesign.code')" width="180" />
      <el-table-column prop="name" :label="t('dbms.design.formDesign.name')" width="250" />
      <el-table-column prop="appName" :label="t('dbms.design.formDesign.appName')" width="140" />
      <el-table-column prop="note" :label="t('dbms.design.formDesign.note')" />
    </template>
  </WsmTable>
  <WsmForm
    ref="addForm"
    v-model="addData"
    :init-data="initData"
    submit-url="/dbms-server/base/formdesign/add"
    label-width="100px"
    :title="t('dbms.design.formDesign.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="code" :label="t('dbms.design.formDesign.code')">
            <el-input v-model="form.code" :placeholder="t('dbms.design.formDesign.code')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="name" :label="t('dbms.design.formDesign.name')">
            <el-input v-model="form.name" :placeholder="t('dbms.design.formDesign.name')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="note" :label="t('dbms.design.formDesign.note')">
            <el-input
              type="textarea"
              :rows="7"
              v-model="form.note"
              :placeholder="t('dbms.design.formDesign.note')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/dbms-server/base/formdesign/get"
    label-width="100px"
    submit-url="/dbms-server/base/formdesign/update"
    :title="t('dbms.design.formDesign.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="24">
          <el-form-item
            prop="name"
            :label="t('dbms.design.formDesign.name') + '(' + form.code + ')'"
          >
            <el-input v-model="form.name" :placeholder="t('dbms.design.formDesign.name')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="note" :label="t('dbms.design.formDesign.note')">
            <el-input
              type="textarea"
              :rows="7"
              v-model="form.note"
              :placeholder="t('dbms.design.formDesign.note')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType } from '@/components/WsmTable/src/types'
import { delApi, activityApi } from '@/api/dbms/formdesign'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'

const { t } = useI18n()

const appName = defineModel<string>()

//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = ref({
  activity: '0',
  appName: appName.value
})

const addData: FormDataType = {
  code: '',
  name: '',
  note: '',
  appName: '',
  activity: '0'
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  code: '',
  name: '',
  note: ''
}

//查询定义
const queryFormType: QueryFormType = {
  appName: {
    value: appName.value,
    clear: false
  }
}

const update = (id: string) => {
  updateForm.value.show({ id })
}

const formDesignEdit = ref()
const design = (id: string) => {
  formDesignEdit.value.show({ id })
}

const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi({ id })
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const activity = async (id: string) => {
  const rs = await activityApi({ id })
  if (rs.success) {
    table.value.load()
  }
}
const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
